//Ext.namespace('Ext.chloroform');

//Ext.chloroform.MultiChoiceField = Ext.extend(Ext.form.TriggerField, {

//MyDesktop.MultiChoiceField.Entry

Ext.define('MyDesktop.MultiChoiceField.Entry', {
    extend: 'Ext.data.Model',
    fields: [ 'value', 'title', 'description' ],
    idProperty: 'value'
});

Ext.define('MyDesktop.MultiChoiceField.Store', {
    extend: 'Ext.data.Store',

    autoLoad: true,
    model: 'MyDesktop.MultiChoiceField.Entry',
    proxy: {
        type: 'memory',
        reader: {
            type: 'array'
        }
    }
});

Ext.define('MyDesktop.MultiChoiceField', {
    extend:'Ext.form.field.Picker',
    //extend: 'Ext.form.field.Trigger',

    requires: [
        'Ext.ux.form.MultiSelect',
        'Ext.ux.form.ItemSelector',
        'Ext.panel.Panel'
    ],

    alias: 'multichoicefield',

    /**
     * @cfg {Ext.data.Store} datastore
     * This data store contains items that can be selected by the user. Each record is a triplet consisting of
     * value, title and description. The model of the data source must be MyDesktop.MultiChoiceField.Entry.
     */
    datastore: null,

    matchFieldWidth: false,

    initComponent : function() {
        MyDesktop.MultiChoiceField.superclass.initComponent.call(this);
    },

//    initEvents: function() {
//        MyDesktop.MultiChoiceField.superclass.initEvents.call(this);
//    },

    getValue : function() {
        return MyDesktop.MultiChoiceField.superclass.getValue.call(this);
    },

    setValue : function(val) {
        return MyDesktop.MultiChoiceField.superclass.setValue.call(this, val);
    },

    createPicker: function() {
        var curVal = this.getValue();
        if (!Ext.isArray(curVal)) {
            if (curVal == "") {
                curVal = [];
            } else {
                curVal = curVal.split(",");
            }
        }

        var itemSel = {
            xtype: 'itemselector',
            name: 'itemselector',
            width: 500,
            height: 200,
//            anchor: '100%',
            //fieldLabel: 'ItemSelector',
            hideNavIcons: false,
            store: this.datastore,
            displayField: 'title',
            valueField: 'value',
            value: curVal,
//            floating: true,

            allowBlank: false,
            msgTarget: 'side'
        };
//
//        return Ext.create('Ext.panel.Panel', {
//            title: 'Hello',
//            width: 500,
//            height: 200,
//            items: [ itemSel ],
//            //renderTo: document.body
//            floating: true
//        });

        var panel = Ext.create('Ext.panel.Panel', {
            name: 'itemselector',
            width: 500,
            height: 200,
            items: [ itemSel ],
            floating: true
        });

        return panel;
    },

    collapse: function() {
        MyDesktop.MultiChoiceField.superclass.collapse.call(this);

        var picker = this.getPicker();
        var isel = picker.child('itemselectorfield');
        var val = isel.getValue();
        this.setValue(val);
        this.fireEvent('select', this, val);
        //this.triggerBlur();
    }

//    onTriggerClick : function() {
//        if (this.disabled) {
//            return;
//        }
//
//        //['value', 'title', 'description']
//        if (this.menu == null) {
//            var curVal = this.getValue();
//            if (!Ext.isArray(curVal)) {
//                if (curVal == "") {
//                    curVal = [];
//                } else {
//                    curVal = curVal.split(",");
//                }
//            }
//
//
//            var itemsel = {
//                xtype: 'itemselector',
//                name: 'itemselector',
//                anchor: '100%',
//                width: 500,
//                height: 200,
//                //fieldLabel: 'ItemSelector',
//                hideNavIcons: false,
//                store: this.datastore,
//                displayField: 'title',
//                valueField: 'value',
//                value: curVal,
//
//                allowBlank: false,
//                msgTarget: 'side'
//            };
//
//            var m = new Ext.menu.Menu({
//                style: {
//                    overflow: 'visible'     // For the Combo popup
//                },
//                items: [ itemsel ]
//            });
//
//            this.menu = m;
//            this.menu.on('hide', this.onMenuHide, this);
//
//        }
//
//        this.menu.show(this.el, "tl-bl?");
//
//    },

//    validateBlur : function(e) {
//        return false;
//    },
//
//    onMenuHide: function() {
//        //var isel = this.menu.find('itemselector')[0];
//        var isel = this.menu.child('itemselectorfield');
//        var val = isel.getValue();
//        //alert("onMenuHide:" + isel.getValue());
//        this.setValue(val);
//        //this.focus(false, 60);
//        this.fireEvent('select', this, val);
//        this.triggerBlur();
//        //this.menuEvents('un');
//    }


});

//Ext.reg('multichoicefield', Ext.chloroform.MultiChoiceField);